<template>
  <div class="app-container">
    <el-row>
      <el-row >
        <el-radio-group v-model="listQuery.days" size="small" fill="#d6d6d6" @change="handDaysChange">
          <el-radio-button label="7">7天</el-radio-button>
          <el-radio-button label="14">14天</el-radio-button>
          <el-radio-button label="30">30天</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="line_chart_pick_date"
          :editable="false"
          type="daterange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handlelineChartDatePickChange">
        </el-date-picker>
      </el-row>
      <el-row class="title"><span>粉丝统计趋势图</span></el-row>
      <line-chart :chart-data="lineChartData"></line-chart>
      <el-table :data="list"  element-loading-text="Loading" :header-cell-style="{ borderTop:'1px #f3f3f3 solid',backgroundColor:'#f5f6f6' }"  fit highlight-current-row>
        <el-table-column label='日期' align="center">
          <template slot-scope="scope">
            {{scope.row.date}}
          </template>
        </el-table-column>
        <el-table-column label="日新增/日" align="center">
          <template slot-scope="scope">
            {{scope.row.Fcount}}
          </template>
        </el-table-column>
        <el-table-column label="累计新增/日" align="center">
          <template slot-scope="scope">
            {{scope.row.FallCount}}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import { parseTime } from '@/utils/index'
import ajax from '@/utils/ajax'

export default {
  name: 'index',
  components: {
    LineChart
  },
  data() {
    return {
      list: [],
      planOptions: [],
      todayData: [],
      lineChartData: {
        xData: [],
        Fcount: [],
        FallCount: []
      },
      listQuery: {
        days: '7',
        start_time: '',
        end_time: ''
      },
      line_chart_pick_date: '',
      ad_type: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      group: '',
      btnAdAdd: false
    }
  },
  created() {
    this.getDatas()
  },
  methods: {
    getDatas() {
      const self = this
      // const testData = '{"errCode":0,"errMsg":"success","data":{"2018-09-07":{"Fcount":0,"FallCount":0},"2018-09-08":{"Fcount":0,"FallCount":0},"2018-09-09":{"Fcount":0,"FallCount":0},"2018-09-10":{"Fcount":0,"FallCount":0},"2018-09-11":{"Fcount":0,"FallCount":0},"2018-09-12":{"Fcount":0,"FallCount":0},"2018-09-13":{"Fcount":0,"FallCount":0},"mobile":"186****8258"}}'
      // const jsondata = JSON.parse(testData)
      // const data = jsondata.data
      // for (const key in data) {
      //   if (key !== 'mobile') {
      //     self.lineChartData.xData.push(key)
      //     self.lineChartData.Fcount.push(data[key].Fcount)
      //     self.lineChartData.FallCount.push(data[key].FallCount)
      //     const temp = {}
      //     temp.date = key
      //     temp.Fcount = data[key].Fcount
      //     temp.FallCount = data[key].FallCount
      //     self.list.push(temp)
      //   }
      // }
      ajax.getData(process.env.BASE_API + '/statistics/fans', this.listQuery).then(function(res) {
        if (res.errCode === 0) {
          const data = res.data
          for (const key in data) {
            if (key !== 'mobile') {
              self.lineChartData.xData.push(key)
              self.lineChartData.Fcount.push(data[key].Fcount)
              self.lineChartData.FallCount.push(data[key].FallCount)
              const temp = {}
              temp.date = key
              temp.Fcount = data[key].Fcount
              temp.FallCount = data[key].FallCount
              self.list.push(temp)
            }
          }
        }
      })
    },
    handDaysChange() {
      this.listQuery.start_time = ''
      this.listQuery.end_time = ''
      this.list = []
      this.lineChartData.xData = []
      this.lineChartData.Fcount = []
      this.lineChartData.FallCount = []
      this.getDatas()
    },
    handlelineChartDatePickChange() {
      if (this.line_chart_pick_date) {
        const date1 = (new Date(this.line_chart_pick_date[0])).getTime()
        const date2 = (new Date(this.line_chart_pick_date[1])).getTime()
        const diff = date2 - date1
        const point5 = 45 * 24 * 3600 * 1000
        if (diff > point5) {
          this.line_chart_pick_date = ''
          this.$message({ message: '查询时间不能超过45天', type: 'error' })
        } else {
          this.listQuery.days = ''
          this.listQuery.start_time = parseTime(new Date(this.line_chart_pick_date[0]), '{y}-{m}-{d}')
          this.listQuery.end_time = parseTime(new Date(this.line_chart_pick_date[1]), '{y}-{m}-{d}')
          this.list = []
          this.lineChartData.xData = []
          this.lineChartData.Fcount = []
          this.lineChartData.FallCount = []
          this.getDatas()
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .title{
    text-align: left;
    margin: 20px 0 0 0;
    span{
      color: #50697a;
      font-size: 18px;
      font-weight: bold;
      margin-top: 20px;
    }
  }
</style>
